<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			#list{
				display: none;
				background: gray;
				width: 150px;
				
				position: absolute;
			}
			li{
				width: 150px;
				height: 30px;
				border-bottom: 1px solid black;
				text-align: center;
				line-height: 30px;
				font-size: 20px;
				position: relative;
			}
			li ul{
				position: absolute;
				top: 0;
				left: 150px;
				display: none;
				background: green;
			}
			li ul ul{
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul id="list">
				<li>li1</li>
				<li>li2</li>
				<li class="noDisappear">
					<p>li3</p>
					<ul >
						<li>li3-1</li>
						<li>
							<p>li3-2</p>
							<ul>
								<li>li3-2-1</li>
								<li>li3-2-1</li>
							</ul>
						</li>
						<li>li3-3</li>
						
					</ul>
				</li>
				<li class="noDisappear">
					<p>li4</p>
					<ul>
						<li>
							<p>li4-1</p>
							<ul>
								<li>li4-1-1</li>
								<li>li4-1-2</li>
							</ul>
						</li>
						<li>li4-2</li>
						<li>li4-3</li>
					</ul>
				</li>
				<li>li5</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var list = document.getElementById("list");
		var noDisAppears = document.getElementsByClassName("noDisappear"); 
		document.oncontextmenu = function(event){
			var ev = event || window.event;
			var x = ev.pageX;
			var y = ev.pageY;
			list.style.display = "block";
			list.style.top = y + "px";
			list.style.left = x + "px";
			return false;
		}
		document.onclick = function(){
			list.style.display = "none";
		}
		//阻止li3  li4  事件冒泡往上传
		for(var i = 0;i < noDisAppears.length;i++){
			noDisAppears[i].onclick = function(event){
				var ev = event || window.event;
				if(ev.stopPropagation){
					if(ev.target.tagName == "P"){
						ev.stopPropagation();
					}
				}else{
					ev.cancelBubble = true;
				}
			}
		}
//		li3   li4  光标移入的时候出现子菜单
		var allLiS = document.getElementsByTagName("li");
		for(var i = 0;i < allLiS.length;i++){
			allLiS[i].onmouseover = function(event){
				this.style.background = "blue";
				//onmouseover 和 onmouseenter  都是鼠标移入元素的时候触发事件，但是onmouseenter 不会进行事件冒泡，假设A元素下面包含B元素，如果使用onmouseenter绑定事件给A，这个时候如果光标往A元素身上进入B的时候，只会进行一次触发。
				//但是onmouseenter 和 onmouseleave有兼容性问题
				if(this.children.length > 0 && this.children[1].tagName == "UL"){
					this.children[1].style.display = "block";
				}
			}
			allLiS[i].onmouseout = function(event){
				this.style.background = "";
				if(this.children.length > 0 && this.children[1].tagName == "UL"){
					this.children[1].style.display = "none";
				}
			}
		}
	</script>
</html>
